<template>
  <div class="wrap">
    <div class="header-1">
      <a href="###" class="dun"><img src="../../assets/3king/断货王/back.png" alt="" class="back" @click="doBack"></a>
      <span class="fonts">商品详情</span>
      <div class="three">
        <router-link to="cart">
          <img src="../../assets/3king/断货王商品详情/buyCarpng.png" alt="" class="three-1">
        </router-link>
        <router-link to="/shouye">
          <img src="../../assets/3king/断货王商品详情/home.png" alt="">
        </router-link>
        <img src="../../assets/3king/断货王/share.png" alt="" class="share">
      </div>
    </div>
    <div class="swiper-box" ref="swiperBox">
      <swiper class="box-container" :options="swiperOption" ref="mySwiper">
        <swiper-slide v-for="item in listImg" :key="item.id" @mouseenter="stopPlay" @mouseleave="play">
          <img alt="swiper-image" class="swiper-image" :src="item.url">
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
    <div class="header-2 clearfix">
      <div class="sp-1">抢购价:¥129.08</div>
      <div class="sp-2">今天15:00限量抢购</div>
      <div class="sp-3">提醒我</div>
    </div>
    <div class="price">
      <div class="data">
        <img src="../../assets/3king/断货王商品详情/england.png" alt="">
        <div class="EDG">
          <span class="eng">英国直邮</span>
          <span class="quali">焕彩萃璨花蕊唇彩4.8g焕彩萃璨花
  蕊唇彩4.8g 焕彩萃璨花蕊唇彩4.8g</span>
        </div>
      </div>
      <div class="price-1">¥169</div>
      <span class="one">关税:¥10</span>
      <a href="###"><span class="two">详情></span></a>
      <div class="one">邮费:¥50</div>
    </div>
    <div class="point">
      <img src="../../assets/3king/断货王商品详情/jifengou.png" alt="">
      <span class="five">500000积分可抵500元，限购1件</span>
    </div>
    <div class="fly">
      <div class="fly-1">
        <img src="../../assets/3king/断货王商品详情/nosupport.png" alt="">
        <span>不支持7天无忧退换</span>
      </div>
      <div class="fly-2">
        <img src="../../assets/3king/断货王商品详情/fly.png" alt="">
        <span>海外包邮</span>
      </div>
      <div class="fly-3">
        <img src="../../assets/3king/断货王商品详情/zhengpin.png" alt="">
        <span>正品保证 ></span>
      </div>
    </div>
    <div class="id">
      <img src="../../assets/3king/断货王商品详情/england.png" alt="">
      <div class="zhi">直邮，下单时需要提供真实姓名和身份证号以及收货地址请先去添加并填写这些信息</div>
      <a href="###" class="add">去添加</a>
    </div>
    <div class="mood">
      <div class="ala">
        <span class="red-1"></span>
        <span class="red-2">阿拉粉心得</span>
      </div>
      <router-link to="xinde">
        <div class="more">
          查看更多>
        </div>
      </router-link>
    </div>
    <div class="hero">
      <div class="hero-1">
          颜色涂抹上去看着
          很漂亮，棒棒哒
        <div class="hero-2">
          <img src="../../assets/3king/断货王商品详情/headImg.png" alt="">
          <span>霜霜</span>
        </div>
      </div >
      <div class="hero-1">
        美美哒!!!!!!!
        <div class="hero-2">
          <img src="../../assets/3king/断货王商品详情/headImg.png" alt="">
          <span>爱美丽!</span>
        </div>
      </div>
      <div class="hero-1">
        美美哒!!!!!!!
        <div class="hero-2">
          <img src="../../assets/3king/断货王商品详情/headImg.png" alt="">
          <span>爱美丽!</span>
        </div>
      </div>
    </div>
    <div class="brand">
      <div class="brand-top">
        <div class="child-1">
          <img src="../../assets/3king/断货王商品详情/brandlogo.png" alt="">
        </div>
        <div class="child-2">
          <div class="sun-1">品牌名字品牌名字</div>
          <div class="sun-2">
            查看
            <span>10</span>
            件商品
          </div>
        </div>
        <div class="child-3">英国最大彩妆品牌</div>
        <div class="child-4">+关注</div>
      </div>
      <div>
        <div class="brand-bo">品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌
          介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍
          品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介...</div>
      </div>
    </div>
    <div class="pic">
      <div class="pic-1">
        <img src="../../assets/3king/断货王商品详情/product1.png" alt="">
        <div class="meet">会呼吸丝滑蜜粉</div>
        <div class="meet-2">¥199</div>
      </div>
      <div class="pic-1">
        <img src="../../assets/3king/断货王商品详情/product2.png" alt="">
        <div class="meet">会呼吸丝滑蜜粉</div>
        <div class="meet-2">¥299</div>
      </div>
      <div class="pic-1">
        <img src="../../assets/3king/断货王商品详情/product3.png" alt="">
        <div class="meet">会呼吸丝滑蜜粉</div>
        <div class="meet-2">¥188</div>
      </div>
    </div>
    <div class="use">
      <div class="use-mi">
        <div class="use-1">
          <div class="diamond"></div>
          <div class="diamond-1">商品描述</div>
        </div>
        <div class="use-2">
          该模块主要用来描述上面产品，模块大小根据商品描述的内容多
          少来决定。该模块主要用来描述上面产品该模块主要用来描述上
          面产品该模块主要用来描述上面产品该模块主要用来描述上面产
          品该模块主要用来描述上面产品该模块主要...
        </div>
        <div class="use-1">
          <div class="diamond"></div>
          <div class="diamond-1">使用方法</div>
        </div>
        <div class="tiaoli">
          <div>1.该模块用来介绍商品的使用方法</div>
          <div>2.该模块的大小同样取决于该使用方法的内容多少</div>
          <div>3.所以该模块活动性比较大</div>
        </div>
        <div class="use-1">
          <div class="diamond"></div>
          <div class="diamond-1">商品图片</div>
        </div>
        <div class="use-3">
          <div class="name-1">
            该模块主要用于上面产品的产品展示图，该模块的大小取决于
            该商品图片长度的多少，该模块活动性比较大，应预留够足够
            的大小
          </div>
          <div class="name-2">
            <img src="../../assets/3king/断货王/listImg2.png" alt="">
          </div>
          <div class="name-2">
            <img src="../../assets/3king/断货王/listImg2.png" alt="">
          </div>
          <div class="name-2">
            <img src="../../assets/3king/断货王/listImg2.png" alt="">
          </div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="ala-a">
        <span class="red-1"></span>
        <span class="red-2">阿拉粉在买</span>
      </div>
      <div class="pic">
        <div class="pic-1">
          <img src="../../assets/3king/断货王商品详情/product1.png" alt="">
          <div class="meet">会呼吸丝滑蜜粉</div>
          <div class="meet-2">¥199</div>
        </div>
        <div class="pic-1">
          <img src="../../assets/3king/断货王商品详情/product2.png" alt="">
          <div class="meet">会呼吸丝滑蜜粉</div>
          <div class="meet-2">¥299</div>
        </div>
        <div class="pic-1">
          <img src="../../assets/3king/断货王商品详情/product3.png" alt="">
          <div class="meet">会呼吸丝滑蜜粉</div>
          <div class="meet-2">¥188</div>
        </div>
      </div>
    </div>
    <div class="base">
      <div class="ala-a" @click="doShowTrue">
        <span class="red-1"></span>
        <span class="red-2">服务承诺</span>
      </div>
      <div class="base-1">
        <div class="base-son">
          <div class="bufa" v-for="item in 4">
            <div>
              <img src="../../assets/3king/断货王商品详情/zhengpin1.png" alt="">
            </div>
            <div>正品保证</div>
          </div>
        </div>
      </div>
    </div>
    <div class="small">
      <img src="../../assets/3king/断货王商品详情/tips.png" alt="">
    </div>
    <p>运费相关：英国直邮商品相关运费为50元。</p>
    <p>价格说明：划线价、国内参考价、店头价可能是品牌专柜价、吊
      牌价或品牌商提供的指导价等价格，其受国家地区、时间和市场
      行情波动的影响而可能与您购物时看到的不一致，该价格仅供参
      考。</p>
    <p>商品包装：海外商品包装更换较为频繁，因此顾客您收到的货品
      有可能与图片不完全一致，页面图片及描述仅供参考，请以您最
      终收到的实物为准，由此给您带来的不便请您多谅解。</p>
    <p>服务承诺：阿拉灯承诺站内销售商品均为海外原装正品，并会持
      续为顾客们带来海外最新商品。</p>
    <p class="last">该处模块大下跟该处内容多少有关，内容多，模块大，反之相反</p>
    <div class="last-base">
      <div class="last-left">
        <img src="../../assets/3king/断货王商品详情/lineserve.png" alt="">
        <span>在线客服</span>
      </div>
      <div class="last-right">
        加入购物车
      </div>
    </div>
    <div class="maskDiv" v-show="isShow" @click="doShow"></div>
    <div class="mask" v-show="isShow">
      <div class="mask-1">
        服务说明
        <img src="../../assets/3king/断货王商品详情/eye.png" alt="" @click="doShow">
      </div>
      <div class="mask-2">
        <img src="../../assets/3king/断货王商品详情/nosupport.png" alt="">
        <span>不支持7天无忧退货</span>
        <div class="mask-unify">
          该商品特殊性，一经售出不存在质量问题不享受7天无理由退换。请在收到商品后在拆封或试穿之前仔细检查外观和附属品。
        </div>
      </div>
      <div class="mask-2">
        <img src="../../assets/3king/断货王商品详情/fly.png" alt="">
        <span>海外直邮</span>
        <div class="mask-unify">
          该商品特殊性，一经售出不存在质量问题不享受7天无理由退换。请在收到商品后在拆封或试穿之前仔细检查外观和附属品。
        </div>
      </div>
      <div class="mask-2">
        <img src="../../assets/3king/断货王商品详情/zhengpin.png" alt="">
        <span>正品保证</span>
        <div class="mask-unify">
          该商品特殊性，一经售出不存在质量问题不享受7天无理由退换。请在收到商品后在拆封或试穿之前仔细检查外观和附
          属品。
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import {swiper, swiperSlide} from 'vue-awesome-swiper'
  import 'swiper/dist/css/swiper.css'
  export default {
    data () {
      return {
        isShow:false,
        listImg: [
          {url: require('../../assets/3king/断货王/listImg1.png')},
          {url: require('../../assets/3king/断货王/listImg2.png')},
          {url: require('../../assets/3king/断货王/listImg3.png')}
        ],
        swiperOption: {
          notNextTick: true,
          loop: true,
          autoplayDisableOnInteraction: true,
          direction: 'horizontal',
          paginationType: 'bullets',
          paginationClickable: true,
          pagination: {
            el: '.swiper-pagination'
          },
          paginationHide: true,
          autoplay: {
            delay: 2000
          },
        }
      }
    },
    components: {
      swiper,
      swiperSlide
    },
    computed: {
      mySwiper () {
        return this.$refs.mySwiper.swiper
      }
    },
    methods: {
      stopPlay () {
        console.log('111')
        this.mySwiper.stopAutoplay()
      },
      play () {
        this.mySwiper.startAutoplay()
      },
      doShowTrue() {
        this.isShow = true
      },
      doShow() {
        this.isShow = false
      },
      doBack(){
        this.$router.go(-1)
      }
    }
  }
</script>
<style scoped>
  *{
    margin: 0;
    padding: 0;
  }
  .header-1{
    background: #e53e42;
    line-height: 2.13rem;
    display: flex;
    justify-content: space-between;
    align-content: center;
  }
  .dun{
    margin-right: 0.44rem;
    width: 20%;
  }
  .three img{
    margin-right: 0.1rem;
  }
  .back{
    width: 0.51rem;
    height: 0.84rem;
    margin-left: 0.44rem;
  }
  .fonts{
    font-size: 0.8rem;
    color: white;
  }
  .three{
    width: 20%;
  }
  .three img{
    width: 0.8rem;
    height: 0.76rem;
  }
  .swiper-box, .box-container{
    font-size: 0;
    text-align: center;
    background: white;
    padding:0.5rem 0 0.5rem 0;
  }
  .swiper-image{
    text-align: center;
    width: 18%;
  }
  .header-2{
    font-size: 0.62rem;
    background-color: red;
    color: white;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
  }
  .header-2 div{
    display: inline-block;
  }
  .sp-1{
    float: left;
  }
  .sp-2{
    float: left;
    margin-left: 2rem;
  }
  .sp-3{
    width: 2.67rem;
    height:0.89rem;
    background-color: white;
    color: red;
    float: right;
    border-radius: 0.44rem;
    margin-right: 0.22rem;
    text-align: center;
  }
  .data img{
    width: 1.5rem
  }
  .EDG{
    width: 80%;
    vertical-align: -0.6rem;
    display: inline-block;
  }
  .eng{
    font-size: 0.67rem;
    color: red;
  }
  .quali{
    font-size: 0.67rem;
  }
  .price{
    padding: 0.3rem;
    border-bottom: 1px solid gray;
  }
  .price-1{
    font-size: 0.8rem;
    color: red;
  }
  .one{
    font-size: 0.53rem;
    color: #4d4d4d;
  }
  .two{
    font-size: 0.46rem;
    border: 1px solid red;
    margin-left: 0.46rem;
    color: red;
    padding: 0.1rem;
  }
  .point{
    padding: 0.3rem;
    border-bottom: 1px solid gray;
  }
  .point img{
    width: 1.51rem;
    height: 0.6rem;
    vertical-align: -0.02rem;
    margin-right: 0.4rem;
  }
  .five{
    font-size: 0.58rem;
  }
  .fly{
    display: flex;
    justify-content: space-between;
    padding: 0.3rem;
    font-size: 0.44rem;
  }
  .fly-1{
    color: red;
  }
  .fly img{
    width: 0.67rem;
    height: 0.67rem;
  }
  .id div{
    display: inline-block;
  }
  .id{
    position: relative;
    margin-bottom: 0.3rem;
  }
  .id img{
    width: 1.5rem;
  }
  .zhi{
    width: 85%;
    font-size: 0.63rem;
    color: red;
    vertical-align: -0.5rem;
  }
  .add{
    padding: 0 0.2rem 0 0.2rem;
    color: red;
    position: absolute;
    right: 0.5rem;
    bottom: 0rem;
    border: 1px solid red;
    border-radius: 0.2rem;
    font-size: 0.4rem;
  }
  .red-1{
    width: 0.13rem;
    height: 0.67rem;
    background-color: red;
    display: inline-block;
  }
  .mood{
    overflow: hidden;
    margin-top: 0.4rem;
    border-bottom: 1px solid gray;
  }
  .mood div{
    display: inline-block;
  }
  .red-2{
    font-size: 0.67rem;
    vertical-align: 0.1rem;
  }
  .ala{
    margin-left: 0.4rem;
  }
  .more{
    font-size: 0.44rem;
    vertical-align: 0.13rem;
    float: right;
    margin-right: 0.4rem;
  }
  .hero{
    display: flex;
    justify-content: space-between;
    margin-top: 0.4rem;
    background-color: white;
    border-bottom: 1px solid gray;
    padding-bottom: 0.5rem;
  }
  .hero-1{
    width: 4.89rem;
    height: 4.44rem;
    border: 1px solid saddlebrown;
    border-radius: 0.22rem;
    font-size: 0.53rem;
    position: relative;
  }
  .hero-2{
    position: absolute;
    bottom: 0.2rem;
  }
  .hero img{
    width: 0.89rem;
    height: 0.89rem;
  }
  .brand{
    margin-top: 0.5rem;
    border-bottom: 1px solid gray;
    background-color: white;
  }
  .brand-top{
    display: flex;
    justify-content: space-between;
    align-content: center;
  }
  .child-1 img{
    width: 1.5rem;
  }
  .sun-1{
    font-size: 0.62rem;
  }
  .sun-2{
    font-size: 0.44rem;
  }
  .sun-2 span{
    color: red;
    font-size: 0.6rem;
  }
  .child-3{
    font-size: 0.44rem;
  }
  .child-4{
    color: red;
    text-align: center;
    width: 2rem;
    height: 0.8rem;
    font-size: 0.44rem;
    border: 1px solid red;
    border-radius: 0.3rem;
  }
  .brand-bo{
    margin-top: 0.4rem;
    margin-bottom: 0.4rem;
    font-size: 0.4rem;
  }
  .pic{
    padding-top: 1rem;
    padding-bottom: 1rem;
    margin-bottom: 0.5rem;
    background-color: white;
    display: flex;
    justify-content: space-between;
    text-align: center;
  }
  .pic-1 img{
    width: 2.67rem;
    height: 3.11rem;
  }
  .pic-1{
    font-size: 0.53rem;
  }
  .meet-2{
    color: red;
  }
  .use{
    background: white;
    margin-bottom: 0.4rem;
  }
  .use-mi{
    width: 95%;
    margin: 0 auto;
  }
  .use-1{
    padding:0.2rem 0 0.2rem 0;
    border-bottom: 1px solid gray;
  }
  .diamond{
    width: 0.13rem;
    height: 0.67rem;
    background: red;
    vertical-align: -0.1rem;
  }
  .diamond-1{
    font-size: 0.67rem;
  }
  .use-1 div{
    display: inline-block;
  }
  .use-2{
    padding: 0.2rem 0 0.2rem 0;
    margin-bottom: 0.2rem;
    border-bottom: 1px solid gray;
    font-size: 0.53rem;
  }
  .tiaoli{
    font-size: 0.53rem;
    border-bottom: 1px solid gray;
    padding: 0.2rem 0 0.2rem 0;
  }
  .use-3{
    width: 90%;
    margin: 0 auto;
  }
  .name-1{
    font-size: 0.53rem;
    margin-top: 0.86rem;
  }
  .name-2{
    text-align: center;
  }
  .name-2 img{
    width: 2.26rem;
    height: 5.69rem;
    margin: 0.5rem 0 0.5rem 0;
  }
  .bottom{
    background: white;
  }
  .ala-a{
    border-bottom: 1px solid gray;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
  }
  .base{
    background: white;
    border: 1px solid red;
  }
  .base-son{
    margin: 0.7rem auto;
    width: 80%;
    display: flex;
    justify-content: center;
  }
  .bufa{
    text-align: center;
    flex: 1;
  }
  .bufa img{
    width: 1.33rem;
  }
  .small{
    text-align: center;
  }
  .small img{
    width: 11rem;
    height: 1.5rem;
  }
  p{
    font-size: 0.54rem;
    margin: 0.3rem 0.3rem;
  }
  .last{
    color: red;
    margin-bottom: 3rem;
  }
  .last-base{
    display: flex;
    font-size: 0.62rem;
  }
  .last-left{
    flex: 1;
    line-height: 1.8rem;
    text-align: center;
    background: white;
  }
  .last-right{
    background: red;
    flex: 1;
    text-align: center;
    line-height: 1.8rem;
    color: white;
  }
  .last-left img{
    width: 0.82rem;
  }
  .mask{
    background-color: white;
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 2;
  }
  .mask-1{
    line-height: 1.5rem;
    text-align: center;
    border-bottom: 1px solid gainsboro;
    font-size: 0.83rem;
    overflow: hidden;
  }
  .mask-1 img{
    width: 0.53rem;
    float: right;
    margin-right: 0.5rem;
    margin-top: 0.4rem;
  }
  .mask-2{
    width: 90%;
    margin:0.3rem auto;
  }
  .mask-2 img{
    width: 0.67rem;
  }
  .mask span{
    font-size: 0.62rem;
    vertical-align: -0.05rem;
  }
  .mask-unify{
    margin: auto;
    padding: 0.3rem 0 0.8rem 0;
    width: 90%;
    font-size: 0.53rem;
    color: #808080;
  }
  .maskDiv{
    position: fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.4;
    z-index: 1;
  }
</style>
